<!--
 * @Author: slq
 * @Date: 2020-04-10 18:03:23
 * @LastEditTime: 2020-04-11 01:02:14
 * @LastEditors: slq
 * @Description: In User Settings Edit
 * @FilePath: /charts/src/views/chart/database/processItem.vue
 -->
<template>
  <div class="process-item">
    <div class="project">
      <h1 :title="listItemData.project.name">
        <!-- <span :class="'flag flag-' + listItemData.project.flag"></span> -->
        {{ listItemData.project.name }}
      </h1>
      <ul class="mt-10">
        <li style="display:flex">
          <span></span>
          <div style="flex:1">
            SPI: &nbsp;&nbsp;<em style="color:#fff; font-weight:700;"
              >{{ listItemData.project.SPI.toFixed(0) }}%</em
            >
          </div>
          <div class="present clearfix"
          :style="{
            width: isMobile ? '80px' : '140px'
          }"
          >
            <div
              class="item"
              :class="{ green: listItemData.project.SPI >= 1 }"
            ></div>
            <div
              class="item"
              :class="{
                yellow:
                  listItemData.project.SPI < 1 && listItemData.project.SPI > 0.9
              }"
            ></div>
            <div
              class="item"
              v-statusJump="'1'"
              :class="{ red: listItemData.project.SPI <= 0.9 }"
            ></div>
          </div>
        </li>
        <li style="display:flex">
          <span></span>
          <div style="flex:1">
            计划完成: &nbsp;&nbsp;&nbsp;<em
              style="font-weight:700;"
              >{{ listItemData.project.summarySchedulePercentComplete }}%</em
            >
          </div>
        </li>
        <li style="display:flex">
          <span></span>
          <div style="flex:1">
            实际完成: &nbsp;&nbsp;&nbsp;<em
              style="font-weight:700;"
              >{{
                listItemData.project.summaryPerformancePercentCompleteByCost
              }}%</em
            >
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProcessItem',
  props: {
    isMobile: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    listItemData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    index: {
      type: Number,
      default: () => {
        return 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.process-item {
  height: 150px;
  display: flex;
  .project {
    // background: #ffffff;
    height: 100%;
    width: 100%;
    margin-right: 10px;
    padding: 12px 10px 10px 0px;
    h1 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 14px;
    }
    ul {
      li {
        margin: 5px 0;
        height: 30px;
        line-height: 30px;
        * {
           color: #fff;
           font-weight: 700;
        }
        span {
          vertical-align: middle;
          display: inline-block;
          height: 4px;
          width: 4px;
          border-radius: 50%;
          background: #fff;
          margin-right: 10px;
          margin-top: 13px;
        }
        .present {
          display: inline-block;
          height: 10px;
          float: right;
          .item {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background: #cccccc;
            display: inline-block;
            margin-right: 3px;
          }
          .green {
            background: green;
            box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.4);
          }
          .yellow {
            background-color: rgba(255, 255, 0, 1);
            box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.4);
          }
          .red {
            background-color: rgb(255, 0, 0);
            box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.4);
          }
        }
      }
    }
  }
  .process {
    height: 100%;
    flex: 1;
    background: #ffffff;
    padding: 10px;
  }
}
</style>
